<!--
 * @Author: egg1bro
 * @Date: 2022-12-24 14:22:48
 * @LastEditTime: 2023-01-11 14:10:59
 * @LastEditors: egg1bro
 * @Description: 
 * @FilePath: \team-graduation-design\src\views\Register\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="nav">
        <van-nav-bar right-text="客服" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
        <h1>注册</h1>
    </div>

    <div class="form">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="phone" clearable name="用户名" placeholder="手机号"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="sms" center placeholder="验证码">
                    <template #button>
                        <van-button size="small" type="primary" @click="startTimer" :disabled="timeLeft > 0"
                            v-if="timeLeft == 0">发送验证码</van-button>
                        <span v-else="timeLeft > 0">{{ timeLeft + "s后重新获取" }}</span>
                    </template>
                </van-field>
                <van-field v-model="password" :type="!passwordType ? 'password' : 'text'"
                    :right-icon="!passwordType ? 'closed-eye' : 'eye'" name="密码" placeholder="设置密码"
                    :rules="[{ required: true, message: '请填写密码' }]" @click-right-icon='passwordType = !passwordType'>

                </van-field>
                <h3>密码要求8-16位，至少包含数字、字母、符号两种元素</h3>


            </van-cell-group>
            <div class="lgbtn">
                <van-button square block type="primary" native-type="submit" :disabled="checked == true ? false : true"
                    @click="goAddName">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>

    <van-field name="checkbox" class="bottom-center">
        <template #input>
            <van-checkbox v-model="checked" shape="square" icon-size="16px">

            </van-checkbox>
            <div class="d1">我已经阅读并同意学习通 <a @click="showDialog">《登录政策》</a> 和 <a @click="showDialog">《用户协议》</a> </div>
        </template>
    </van-field>

    <!-- dialog -->
    <van-dialog v-model:show="show" message-align="left" title="使用协议与隐私政策" show-cancel-button @confirm="onConfirm"
        :message="message">

    </van-dialog>




</template>

<script setup>

import { ref } from "vue";
import { useRouter } from 'vue-router'
import { useRegisterStore } from '@/stores/register'
//实例化路由
const router = useRouter()
// 实例化仓库
const registerStore = useRegisterStore()

const { getRegisterUser } = registerStore
//用户名和密码
const phone = ref('');
const password = ref('');
// 设置默认验证码倒计时
const timeLeft = ref(0)
let timer = null
//验证码
const sms = ref('')
//勾选框默认值
const checked = ref(false);
//控制密码显示与隐藏的变量
const passwordType = ref(false)
// 使用 ref 创建可响应的变量
const show = ref(false);
// dialog 里 message的值
const message = `欢迎使用“学习通”提供的产品和服务！       
                 为了更透明的呈现数字学院收集和使用您的个人信息的情况，数字学院根据业务实际情况更新了协议;特向您推送本提示。`


// 定义方法
const showDialog = () => {
    show.value = true;
};
const onConfirm = () => {
    show.value = false;
};
// 倒计时开始 并获取验证码
const startTimer = () => {

    if (timeLeft.value === 0) {
        timeLeft.value = 60
    }
    timer = setInterval(() => {
        if (timeLeft.value > 0) {
            timeLeft.value--;
        } else {
            clearInterval(timer);
        }
    }, 1000);
}

// 点击提交按钮 注册 跳转到addName页面
const goAddName = async () => {
    try {
        await getRegisterUser({ user_phone: phone.value, password: password.value })
    } catch (error) {
        return Promise.reject(error)
    }
}

//导航栏点击左右的两个操作
const onClickLeft = () => router.push('/');
const onClickRight = () => showToast('按钮');

//提交功能
const onSubmit = (values) => {
    console.log('submit', values);
};

</script>

<style lang="less" scoped>
a {
    text-decoration: none;

}

.nav {
    h1 {
        margin: 25px;
        font-size: 24px;
        font-weight: 500;
    }

    .van-hairline--bottom:after {
        border-bottom-width: 0;
    }
}

.form {
    h3 {
        color: #a9a9a9;
        font-size: 10px;
        margin: 20px;
    }

    .lgbtn {
        margin: 30px 30px 10px 30px;
    }
}

.bottom-center {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);



    .d1 {
        font-size: 12px;
        color: #a9a9a9;

        a {
            color: #1989fa;
            text-decoration: none;
        }
    }

    .van-checkbox {
        margin-left: 17px;
        // font-size: 12px;
        margin-right: 5px;
    }

}
</style>
<style>
:root {
    --van-nav-bar-arrow-size: 20px;
    --van-nav-bar-icon-color: black;
    --van-nav-bar-text-color: #a9a9a9;
}
</style>